<!-- 大数据滚动柱状图 -->
<template>
  <div style="position: relative;">
    <p style="color: var(--text);">{{ chartTitle }}</p>
    <div :style="{ height: '450px', width: '100%' }" style="background-color: var(--background);" ref="chartEl"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, markRaw, watch, toRef } from 'vue'
import * as echarts from 'echarts/core'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/tooltip'

const chartEl = ref<HTMLDivElement>()

const myChart = ref()
// 可以根据父组件传过来的数据生成折线图
const props = defineProps({
  chartTitle: {
    // legend标题数据
    type: String,
    default: () => {
      return ''
    }
  },
  legendData: {
    // legend标题数据
    type: Array,
    default: () => {
      return []
    }
  },
  xAxisData: {
    // xAxis数据
    type: Array,
    default: () => {
      return []
    }
  },
  seriesData: {
    // 折线图数据
    type: Array,
    default: () => {
      return []
    }
  }
})

watch(
  [() => props.xAxisData, () => props.seriesData],
  (val) => {
    echartLine()
  },
  {
    deep: true,
    immediate: true
  }
)

function echartLine() {
  // if (!props.xAxisData.length || !props.seriesData.length) {
  //   return
  // }
  if (!chartEl.value) return // 判断是否有元素
  if (!myChart.value) {
    // 判断是否第一次加载
    myChart.value = markRaw(echarts.init(chartEl.value as HTMLDivElement))
  }
  myChart.value.setOption({
    // legend: {
    //   type: 'scroll',
    //   data: props.legendData,
    // },
    tooltip: {
      trigger: 'axis',
      position: function (pt:any) {
        return [pt[0], '10%'];
      },
    },
    grid: {
      bottom: 90
    },
    xAxis: {
      data: props.xAxisData,
      silent: false,
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      }
    },
    yAxis: {
      splitArea: {
        show: false
      },
      scale: false, // 摆脱 0 值比例
      boundaryGap: [0, '100%'],
      // min: 'dataMin', //取最小值为最小刻度
      max: 'dataMax', //取最大值为最大刻度
    },
    series: [
      {
        name: '',
        type: 'bar',
        data: props.seriesData,
        large: true,
        label: {
          show: true, // 在折线拐点上显示数据
          position: 'top',
          // formatter:function(data:any){
          //   return data.value+'%'
          // }
        },
        barMaxWidth: '50px', //柱子的宽度
        barCategoryGap: '10%', //柱子的间距
      }
    ],
    dataZoom: [
      {
        type: 'inside', // 控制下划线的位置
        start: 0,
        end: 100,
      },
      {
        show: true,
        type: 'slider', //slider表示有滑动块的
        // realtime: true, //实时更新
        // xAxisIndex:[0],//表示x轴折叠
        height: 16, //高度
        bottom: 6,
        start: 0, 
        end: 20, 
        showDataShadow: false, //是否显示数据阴影 默认auto
        backgroundColor: '#F1F1F1', // 设置背景颜色
        fillerColor: '#546fc6', // 设置选中范围的填充颜色
        borderColor: '#F1F1F1', // 设置边框颜色
        brushSelect: false // 是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。
      }
    ],
  })

}
</script>

<style scoped lang="scss"></style>
